@extends('admin.common.main')

@section('css')
    {{--    webuploader上传样式--}}
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
@endsection

@section('cnt')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 房源属性管理
        <span class="c-gray en">&gt;</span> 添加房源属性
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        <form action="{{ route('admin.fangattr.store') }}" method="post" class="form form-horizontal" id="form-fangattr-add">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否顶级：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <span class="select-box">
{{--                        <select name="pid" class="select" v-model="info.pid">--}}
                        <select name="pid" class="select" name="pid">
                            <option value="0">==顶级==</option>
                            @foreach($data as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="name" autocomplete="off">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">
                    <span class="c-red">*</span>属性图标：
                </label>
                <div class="formControls col-xs-4 col-sm-5">
                    <div id="webuploader_picker">选择图标</div>
                </div>
                <div class="formControls col-xs-4 col-sm-4">
                    <input type="hidden" name="icon" id="icon" value="{{ config('up.pic') }}">
                    <img src="" id="pic" style="width: 50px;" value="{{ config('up.pic') }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>字段名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="field_name" >
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加房源属性">
                </div>
            </div>
        </form>
    </article>
@endsection

@section('js')
    <!--引入webuploader的JS-->
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>

    <script type="text/javascript">

        //webuploader
        var uploader = WebUploader.create({
            //选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/webuploader/Uploader.swf',
            // 文件接收服务端。 上传PHP的代码
            server: '{{ route('admin.fangattr.upfile') }}',
            //文件上传时携带的参数
            formData:{
                _token: '{{ csrf_token() }}'
            },
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: true,
            //文件上传时的表单名称,后端$request->hasFile('file')
            fileVal: 'file',
            pick: {
                id: '#webuploader_picker',
                //是否开启选择多个文件的能力(文章封面只要一个图片)
                multiple: false,

            }
        });

        uploader.on( 'uploadSuccess', function( file, ret ) {
            //图片路径
            let src = ret.url;
            //给表单添加value值 用来form入库
            $('#icon').val(src);
            //给图片添加src
            $('#pic').attr('src', src);
        });


        //表单验证
        $("#form-fangattr-add").validate({
            rules:{
                name:{
                    required:true,
                },
                // field_name:{
                //     required:true,
                // },
            },
            onkeyup:false, //回车不能提交
            success:"valid", //成功时的样式
            //验证通过后的处理方法
            submitHandler:function(form){
                //form是dom对象
                form.submit();
            }
        });

    </script>
@endsection
